<template>
  <div id="myEcharts"></div>
</template>

<script setup>
  import { ref, reactive, onMounted, watch } from 'vue'
  import * as echarts from 'echarts'
  import { graphic } from 'echarts'

  const props = defineProps({
    chartXAxisData: {
      type: Array,
      default() {
        return []
      },
    },
    chartAmountYSeriesData: {
      type: Array,
      default() {
        return []
      },
    },
    chartRateYSeriesData: {
      type: Array,
      default() {
        return []
      },
    },
  })

  watch(props.chartXAxisData, () => {
    console.log(props.chartXAxisData)
    initChart()
  })

  const tooltipItemsHtmlString = (items) => {
    return items
      .map(
        (el) => `<div class="content-panel" style="display: flex;
    justify-content: space-between;
    padding: 0 9px;
    background: rgba(255, 255, 255, 0.8);
    width: 164px;
    height: 32px;
    line-height: 32px;
    box-shadow: 6px 0px 20px rgba(34, 87, 188, 0.1);
    border-radius: 4px;
    margin-bottom: 4px;">
        <p style="margin: 0;padding: 0;">
          <span style="background-color: ${el.color};display: inline-block;
    margin-right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;" ></span>
          <span>${el.seriesName}</span>
        </p>
        <span style="font-size: 13px;
    line-height: 15px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #1d2129;
    font-weight: bold;">
        ${el.value}%
        </span>
      </div>`
      )
      .join('')
  }

  function graphicFactory(side) {
    return {
      type: 'text',
      bottom: '8',
      ...side,
      style: {
        text: '',
        textAlign: 'center',
        fill: '#4E5969',
        fontSize: 12,
      },
    }
  }
  const graphicElements = ref([graphicFactory({ left: '2.6%' }), graphicFactory({ right: 0 })])
  const colors = reactive(['#246EFF'])
  const myEcharts = echarts

  const initChart = () => {
    let chart = myEcharts.init(document.getElementById('myEcharts'))
    chart.setOption(
      {
        color: colors,
        grid: {
          // left: '40',
          // right: 0,
          // top: '20',
          bottom: '100',
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          formatter(params) {
            // console.log(params)
            let firstElement = {}
            params.forEach((item) => {
              firstElement = {
                axisDim: item.axisDim,
                axisIndex: item.axisIndex,
                axisType: item.axisType,
                axisId: item.axisId,
                axisValue: item.axisValue,
                axisValueLabel: item.axisValueLabel,
              }
            })
            return `<div style="background: linear-gradient(
    304.17deg,
    rgba(253, 254, 255, 0.6) -6.04%,
    rgba(244, 247, 252, 0.6) 85.2%
  ) !important;margin:-10px;padding:10px;">
            <p style="font-size: 13px;
    line-height: 15px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #1d2129;
    font-weight: bold;margin:0;padding:0;margin-bottom:8px;">${firstElement.axisValueLabel}</p>
            ${tooltipItemsHtmlString(params)}
          </div>`
          },
          className: 'echarts-tooltip-diy',
        },
        legend: {
          bottom: 0,
          data: ['车辆出租率', '车辆日租价'],
          icon: 'circle',
          textStyle: {
            color: '#4E5969',
          },
        },
        graphic: {
          elements: graphicElements.value,
        },
        dataZoom: [
          {
            bottom: 40,
            type: 'slider',
            left: 40,
            right: 14,
            height: 14,
            borderColor: 'transparent',
            handleIcon:
              'image://http://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/1ee5a8c6142b2bcf47d2a9f084096447.svg~tplv-49unhts6dw-image.image',
            handleSize: '20',
            handleStyle: {
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 4,
            },
            brushSelect: false,
            backgroundColor: '#F2F3F5',
          },
          {
            type: 'inside',
            start: 0,
            end: 100,
            zoomOnMouseWheel: false,
          },
        ],
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            // prettier-ignore
            data: props.chartXAxisData,
            axisPointer: {
              show: true,
              lineStyle: {
                color: '#23ADFF',
                width: 2,
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '车辆出租率(%)',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: false,
              // lineStyle: {
              //   color: '#4E5969',
              // },
            },
            axisLabel: {
              formatter: '{value}',
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#E5E8EF',
              },
            },
          },
          {
            type: 'value',
            name: '车辆日租价(元)',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#4E5969',
              },
            },
            axisLabel: {
              formatter: '{value}',
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#E5E8EF',
              },
            },
          },
        ],
        series: [
          {
            name: '车辆出租率',
            data: props.chartRateYSeriesData,
            type: 'line',
            smooth: true,
            // symbol: 'circle',
            symbolSize: 12,
            emphasis: {
              focus: 'series',
              itemStyle: {
                borderWidth: 2,
              },
            },
            lineStyle: {
              width: 3,
              color: new graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(30, 231, 255, 1)',
                },
                {
                  offset: 0.5,
                  color: 'rgba(36, 154, 255, 1)',
                },
                {
                  offset: 1,
                  color: 'rgba(111, 66, 251, 1)',
                },
              ]),
            },
            showSymbol: false,
            // 区域填充样式
            areaStyle: {
              opacity: 0.8,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(17, 126, 255, 0.16)',
                },
                {
                  offset: 1,
                  color: 'rgba(17, 128, 255, 0)',
                },
              ]),
            },
          },
          {
            name: '车辆日租价',
            type: 'bar',
            yAxisIndex: 1,
            data: props.chartAmountYSeriesData,
            emphasis: {
              focus: 'series',
              itemStyle: {
                borderWidth: 2,
                borderColor: '#E0E3FF',
              },
            },
          },
        ],
      },
      true
    )

    window.onresize = function () {
      chart.resize()
    }
  }
  onMounted(() => {
    initChart()
  })
</script>

<style lang="less" scoped>
  #myEcharts {
    width: 100%;
    height: 400px;
  }
</style>
